<!doctype html>
<html lang="en">
  <head>
    <title>DJ Dani</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/static/img/favicon.png" type="image/png">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark px-4">
      <a class="navbar-brand text-white" href="{{ url_for('index') }}">DJ Dani</a>
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link text-white" href="{{ url_for('about') }}">About</a></li>
          <li class="nav-item"><a class="nav-link text-white" href="{{ url_for('events') }}">Events</a></li>
          <li class="nav-item"><a class="nav-link text-white" href="{{ url_for('mp3') }}">Bonus Sets!</a></li>
          <li class="nav-item"><a class="nav-link text-white" href="{{ url_for('coffee') }}">Buy Me a Coffee</a></li>
        </ul>
      </div>
    </nav>
    <div class="container py-4">
      {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
          {% for category, message in messages %}
            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
              {{ message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          {% endfor %}
        {% endif %}
      {% endwith %}
      {% block content %}{% endblock %}
    </div>
  </body>
</html>
